import React, {Component} from 'react'
import {Text, View, ListView, Image, TouchableOpacity,ToastAndroid,BackAndroid,Platform,BackHandler} from 'react-native'

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

var data = require('../../tsconfig.json');

class HomeMainView extends Component {

    constructor(props) {
        super(props);

        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            showText: [],
            showText1: [],
            dataSource: ds
        };
    }

    componentDidMount() {
        return fetch('https://api.1000classes.com/youpinserver/courseList.do?pageindex=1&pricetype=0&sortnum=1&coursetypeid=&type=0&pagesize=50')
            .then((response) => response.json())
            .then((responseJson) => {
                // alert(responseJson);
                console.log(responseJson);

                this.setState({
                    showText: responseJson.map.list[0].fname,
                    // showText1:responseJson.map.list,
                    dataSource: this.state.dataSource.cloneWithRows(responseJson.map.list),
                })

            })
            .catch((error) => {
                dataSource: this.state.dataSource.cloneWithRows(data.map.list);
                console.error(error);

            });
    }

    componentWillMount(){

        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);

    }

    componentWillUnmount() {

        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);

    }


    onBackAndroid = () => {

        if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {

            //最近2秒内按过back键，可以退出应用。

            return false;

        }

        this.lastBackPressed = Date.now();

        ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);

        return true;

    };




    render() {
        return (
            <View style={{backgroundColor: 'green',}}>
                <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',}}>
                    <TouchableOpacity onPress={() => {
                        if (this.lastBackPressed && this.lastBackPressed + 2000 > Date.now()) {
                            if(Platform.os !='ios'){
                                BackHandler.exitApp();
                            }
                            return false;
                        }
                        this.lastBackPressed = Date.now();
                        ToastAndroid.show('再按一次退出程序',ToastAndroid.SHORT);
                        return true;
                    }}>
                        <Image source={require('../image/icon_tabbar_mine_selected.png')}
                               style={{width: 44, height: 44, marginLeft: 8}}/>
                    </TouchableOpacity>
                    <Text style={{
                        color: 'white',
                        fontSize: 18,
                        alignItems: 'center',
                        marginBottom: 10,
                    }}>{this.state.showText}</Text>
                    <View><Text style={{width: 44, height: 44}}>{}</Text></View>
                </View>
                <ListView dataSource={this.state.dataSource}
                          renderRow={this.getItemView} style={{marginBottom:44}}/>


            </View>
        )
    }

    getItemView(rowData) {
        return (
            <View style={{
                flexDirection: 'row',
                backgroundColor: "white",
                padding: 10,
                borderBottomWidth: 1,
                borderBottomColor: '#e8e8e8',

            }}>
                {/*左边的view*/}
                <View>
                    <Image source={{uri: rowData.fstorename}}
                           style={{width: width * 2 / 5, height: width / 4, borderRadius: 6}}/>
                    <Text style={{
                        backgroundColor: 'rgba(90,90, 54, 0.8)',
                        borderBottomLeftRadius: 6,
                        borderBottomRightRadius: 6,
                        position: 'absolute',
                        left: 0,
                        color: 'white',
                        paddingLeft: 6,
                        bottom: 0,
                        width: width * 2 / 5,
                    }}>{rowData.fcusttotal + '人在上课'}</Text>
                </View>

                {/*右边的view*/}
                <View style={{marginLeft: 15}}>
                    <Text style={{fontSize: 18, color: '#333333'}}>{rowData.fname}</Text>
                    <Text style={{
                        fontSize: 16,
                        marginTop: 8,
                        marginBottom: 8,
                    }}>{rowData.fstatus}</Text>
                    <Text style={{
                        fontSize: 16,
                        color: rowData.fmoney == '0.0' ? 'green' : 'red'
                    }}>{rowData.fmoney == '0.0' || rowData.fmoney == '0' ? '免费' : '￥' + rowData.fmoney}</Text>
                </View>
            </View>
        );
    }


}

module.exports = HomeMainView;